<template>
  <Dialog v-model="dialogVisible" :title="dialogTitle">
    <ContentWrap>
      <el-form :model="queryParams" ref="queryFormRef" label-width="auto" :inline="true">
        <el-form-item label="床位名称" prop="bedName">
          <el-input
            v-model="queryParams.bedName"
            placeholder="请输入床位名称"
            :clearable="true"
            @keyup.enter="getPage"
          />
        </el-form-item>
        <el-form-item label="床位类型" prop="bedTypeId">
          <el-select v-model="queryParams.bedTypeId" placeholder="请输入床位类型" :clearable="true">
            <el-option
              v-for="dict in bedTypeList"
              :key="dict.id"
              :label="dict.typeName"
              :value="dict.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="房间名称" prop="roomName">
          <el-input
            v-model="queryParams.roomName"
            placeholder="请输入房间名称"
            :clearable="true"
            @keyup.enter="getPage"
          />
        </el-form-item>
        <el-form-item label="房间类型" prop="roomTypeId">
          <el-select
            v-model="queryParams.roomTypeId"
            placeholder="请输入房间类型"
            :clearable="true"
          >
            <el-option
              v-for="dict in roomTypeList"
              :key="dict.id"
              :label="dict.typeName"
              :value="dict.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="楼栋" prop="buildingId">
          <el-select v-model="queryParams.buildingId" placeholder="请输入楼栋" :clearable="true">
            <el-option
              v-for="dict in buildList"
              :key="dict.id"
              :label="dict.buildingName"
              :value="dict.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleClickSearch">
            <Icon icon="ep:search" />
            搜索
          </el-button>
          <el-button @click="handleClickReset">
            <Icon icon="ep:refresh" />
            重置
          </el-button>
        </el-form-item>
      </el-form>
      <Table
        :columns="columns"
        :page-param="queryParams"
        :adaptive="true"
        :page-data="queryData"
        save-key="BedInfoSelect"
        @page-change="getPage"
        @row-dblclick="handleTableDblclick"
      />
    </ContentWrap>
  </Dialog>
</template>
<script setup name="BedInfoSelect" lang="ts">
import * as BedInfoApi from '@/api/bed/bedInfo'
import * as BuildInfoApi from '@/api/bed/buildingInfo'
const buildList = ref()
const roomTypeList = ref()
const bedTypeList = ref()
const dialogTitle = ref('')
const dialogVisible = ref(false)
const queryFormRef = ref()
const queryParams = ref({
  bedName: undefined,
  bedTypeId: undefined,
  roomName: undefined,
  roomTypeId: undefined,
  buildingId: undefined
})
const queryData = ref()
const columns = [
  {
    label: '床位名称',
    prop: 'bedName'
  },
  {
    label: '床位类型',
    prop: 'bedType.typeName'
  },
  {
    label: '价格',
    prop: 'price'
  },
  {
    label: '房间名称',
    prop: 'room.roomName'
  },
  {
    label: '房间类型',
    prop: 'room.roomType.typeName'
  },
  {
    label: '创建时间',
    prop: 'createTime'
  }
]
const emit = defineEmits(['selectValue'])
/** 打开弹窗 */
const open = async () => {
  dialogVisible.value = true
  buildList.value = await BuildInfoApi.listQuery()
  roomTypeList.value = await BedInfoApi.listQueryRoomType()
  bedTypeList.value = await BedInfoApi.listQueryBedType()
  getPage()
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 搜索按钮操作 */
const handleClickSearch = () => {
  getPage()
}

/** 重置按钮操作 */
const handleClickReset = () => {
  queryFormRef.value?.resetFields()
  handleClickSearch()
}

/** 处理响应事件  */
const getPage = async () => {
  queryData.value = await BedInfoApi.pageQuery(queryParams.value)
}

/** 双击table列操作  */
const handleTableDblclick = (row) => {
  emit('selectValue', row)
  close()
}

/** 关闭弹窗 */
const close = async () => {
  dialogVisible.value = false
}
</script>
